<template>
  <div id="portraitPage">
    <HeadNav type="inquire" ref="head" :show="1"></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="inquire" sort="portrait"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <!-- 用户信息 -->
            <div class="model-container" v-if="readerInfo">
              <div class="model-bg">
                <div class="section-title">用户信息</div>
                <div class="reader-content">
                  <a-row type="flex" align="middle" justify="space-between" :gutter="20">
                    <a-col flex="500px">
                      <div>
                        <span class="user-name">{{readerInfo.base.realname?readerInfo.base.realname:'--'}}</span>
                        <span class="user-mobile">{{readerInfo.base.mobile?readerInfo.base.mobile:'--'}}</span>
                      </div>
                      <div style="margin-top:5px;">
                        <span class="data-tab data-tab-ten data-tab-big">{{readerInfo.base.sex?readerInfo.base.sex:'性别未知'}}</span>
                        <span class="data-tab data-tab-ten data-tab-big">年龄未知</span>
                        <span class="data-tab data-tab-ten data-tab-big" v-if="readerInfo.base.province || readerInfo.base.city || readerInfo.base.country">{{readerInfo.base.province}}{{readerInfo.base.city?'/'+readerInfo.base.city:''}}{{readerInfo.base.country?'/'+readerInfo.base.country:''}}</span>
                        <span class="data-tab data-tab-ten data-tab-big" v-else>地区未知</span>
                        <span class="data-tab data-tab-ten data-tab-big">生日未知</span>
                      </div>
                      <div style="margin-top:5px;">
                        <span class="data-tab data-tab-eleven data-tab-big">火把ID：{{readerInfo.base.hb_register_time?'已注册':'未注册'}}</span>
                        <span class="data-tab data-tab-eleven data-tab-big">微店ID：未注册</span>
                        <span class="data-tab data-tab-eleven data-tab-big">{{readerInfo.base.wx_nickname?'微信：'+readerInfo.base.wx_nickname:'微信未知'}}</span>
                      </div>
                      <div style="margin-top:5px;">
                        <span class="data-tab data-tab-eleven data-tab-big">{{readerInfo.base.device_version?'设备号：'+readerInfo.base.device_version:'设备未知'}}</span>
                        <span class="data-tab data-tab-eleven data-tab-big">{{readerInfo.base.device_brand?'手机：'+readerInfo.base.device_brand:'手机未知'}}</span>
                        <span class="data-tab data-tab-eleven data-tab-big">{{readerInfo.base.device_system?'系统：'+readerInfo.base.device_system:'系统未知'}}</span>
                      </div>
                      <div class="devider"></div>
                      <a-row type="flex" align="middle" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">首次纸质书下单时间</div>
                        </a-col>
                        <a-col flex="auto">{{
                          readerInfo.base.first_buy_book_time ? readerInfo.base.first_buy_book_time : "--"
                        }}</a-col>
                      </a-row>
                      <a-row type="flex" align="middle" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">最近一次纸质书下单时间</div>
                        </a-col>
                        <a-col flex="auto">{{
                          readerInfo.base.last_buy_book_time ? readerInfo.base.last_buy_book_time : "--"
                        }}</a-col>
                      </a-row>
                      <a-row type="flex" align="middle" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">火把注册时间</div>
                        </a-col>
                        <a-col flex="auto">{{
                          readerInfo.base.hb_register_time ? readerInfo.base.hb_register_time : "--"
                        }}</a-col>
                      </a-row>
                      <a-row type="flex" align="middle" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">最近一次火把访问时间</div>
                        </a-col>
                        <a-col flex="auto">{{
                          readerInfo.base.hb_last_view_time ? readerInfo.base.hb_last_view_time : "--"
                        }}</a-col>
                      </a-row>
                      <div class="devider"></div>
                      <a-row type="flex" align="middle" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">累计纸质书下单次数</div>
                        </a-col>
                        <a-col flex="auto">{{
                          readerInfo.base.total_buy_book_num ? readerInfo.base.total_buy_book_num+'单' : "--"
                        }}</a-col>
                      </a-row>
                      <a-row type="flex" align="middle" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">累计纸质书码洋</div>
                        </a-col>
                        <a-col flex="auto">{{
                          readerInfo.base.total_buy_book_fixed ? readerInfo.base.total_buy_book_fixed.toFixed(2)+'元' : "--"
                        }}</a-col>
                      </a-row>
                      <a-row type="flex" align="middle" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">累计纸质书实洋</div>
                        </a-col>
                        <a-col flex="auto">{{
                          readerInfo.base.total_buy_book_amount ? readerInfo.base.total_buy_book_amount.toFixed(2)+'元' : "--"
                        }}</a-col>
                      </a-row>
                      <a-row type="flex" align="middle" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">累计购买纸质书品种数</div>
                        </a-col>
                        <a-col flex="auto">{{
                          readerInfo.base.total_buy_sku_count ? readerInfo.base.total_buy_sku_count+'个品种' : "--"
                        }}</a-col>
                      </a-row>
                      <a-row type="flex" align="middle" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">累计购买纸质书册数</div>
                        </a-col>
                        <a-col flex="auto">{{
                          readerInfo.base.total_buy_book_count ? readerInfo.base.total_buy_book_count+'册' : "--"
                        }}</a-col>
                      </a-row>
                    </a-col>
                    <a-col flex="520px"></a-col>
                  </a-row>
                </div>
              </div>
            </div>
            <!-- 下单数据 -->
            <div class="model-container" v-if="readerInfo">
              <div class="model-bg">
                <div class="section-title">下单数据</div>
                <div class="reader-content">
                  <a-row type="flex" align="top" justify="space-between">
                    <a-col flex="auto">
                      <a-row type="flex" align="top" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">首次纸质书下单时间</div>
                        </a-col>
                        <a-col flex="auto">{{readerInfo.order.first_buy_book_time?readerInfo.order.first_buy_book_time:'--'}}</a-col>
                      </a-row>
                      <a-row type="flex" align="top" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">最近一次纸质书下单时间</div>
                        </a-col>
                        <a-col flex="auto">{{readerInfo.order.last_buy_book_time?readerInfo.order.last_buy_book_time:'--'}}</a-col>
                      </a-row>
                      <a-row type="flex" align="top" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">最常购买时段</div>
                        </a-col>
                        <a-col flex="auto">
                          <div v-if="Object.keys(readerInfo.order.time_most).length">
                            {{readerInfo.order.time_most.name}}（{{readerInfo.order.time_most.count}}次）
                          </div>
                          <div v-else>--</div>
                        </a-col>
                      </a-row>
                      <a-row type="flex" align="top" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">最常下单平台</div>
                        </a-col>
                        <a-col flex="auto">
                          <div v-if="Object.keys(readerInfo.order.channel_most).length">
                            {{readerInfo.order.channel_most.name}}（{{readerInfo.order.channel_most.count}}次）
                          </div>
                          <div v-else>--</div>
                        </a-col>
                      </a-row>
                      <a-row type="flex" align="top" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">最常下单店铺</div>
                        </a-col>
                        <a-col flex="auto">
                          <div v-if="Object.keys(readerInfo.order.shop_most).length">
                            {{readerInfo.order.shop_most.name}}（{{readerInfo.order.shop_most.count}}次）
                          </div>
                          <div v-else>--</div>
                        </a-col>
                      </a-row>
                      <a-row type="flex" align="top" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">最常支付方式</div>
                        </a-col>
                        <a-col flex="auto">
                          <div v-if="Object.keys(readerInfo.order.pay_channel_most).length">
                            {{readerInfo.order.pay_channel_most.name}}（{{readerInfo.order.pay_channel_most.count}}次）
                          </div>
                          <div v-else>--</div>
                        </a-col>
                      </a-row>
                      <a-row type="flex" align="top" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">最常购买金额</div>
                        </a-col>
                        <a-col flex="auto">
                          <div v-if="Object.keys(readerInfo.order.price_most).length">
                            {{readerInfo.order.price_most.name}}（{{readerInfo.order.price_most.count}}次）
                          </div>
                          <div v-else>--</div>
                        </a-col>
                      </a-row>
                      <a-row type="flex" align="top" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">纸质书平均订单价</div>
                        </a-col>
                        <a-col flex="auto">
                            {{readerInfo.order.order_avg?readerInfo.order.order_avg+'元':'--'}}
                        </a-col>
                      </a-row>
                      <a-row type="flex" align="top" class="reader-item">
                        <a-col flex="145px">
                          <div class="reader-label">下单频次</div>
                        </a-col>
                        <a-col flex="auto">
                            {{readerInfo.order.order_frequency?readerInfo.order.order_frequency+'天/次':'--'}}
                        </a-col>
                      </a-row>
                    </a-col>
                    <a-col flex="520px">
                      <div style="text-align:right;margin-bottom:20px;">
                        <a-radio-group name="radioGroup" v-model="radioVal">
                          <a-radio value="1" class="reader-radio">一级类目</a-radio>
                          <a-radio value="2" class="reader-radio">二级类目</a-radio>
                        </a-radio-group>
                      </div>
                      <div v-show="radioVal == 1">
                        <div style="width:520px;" id="cate-one" v-if="cateOneList.length"></div>
                        <div class="no-data" v-else>暂无图表数据</div>
                      </div>
                      <div v-show="radioVal == 2">
                        <div style="width:520px;" id="cate-two" v-if="cateOneList.length"></div>
                        <div class="no-data" v-else>暂无图表数据</div>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
            <!-- 火把数据 -->
            <div class="model-container" v-if="readerInfo">
              <div class="model-bg">
                <div class="section-title">火把数据</div>
                <div class="reader-content">
                  <a-row type="flex" align="top" class="reader-item">
                    <a-col flex="145px">
                      <div class="reader-label">火把注册手机号</div>
                    </a-col>
                    <a-col flex="auto">
                      {{readerInfo.huoba.mobile?readerInfo.huoba.mobile:'--'}}
                    </a-col>
                  </a-row>
                  <a-row type="flex" align="top" class="reader-item">
                    <a-col flex="145px">
                      <div class="reader-label">火把注册时间</div>
                    </a-col>
                    <a-col flex="auto">
                      {{readerInfo.huoba.register_time?readerInfo.huoba.register_time:'--'}}
                    </a-col>
                  </a-row>
                  <a-row type="flex" align="top" class="reader-item">
                    <a-col flex="145px">
                      <div class="reader-label">火把最后访问时间</div>
                    </a-col>
                    <a-col flex="auto">
                      {{readerInfo.huoba.last_view_time?readerInfo.huoba.last_view_time:'--'}}
                    </a-col>
                  </a-row>
                  <a-row type="flex" align="top" class="reader-item">
                    <a-col flex="145px">
                      <div class="reader-label">当前火把APP版本</div>
                    </a-col>
                    <a-col flex="auto">
                      {{readerInfo.huoba.app_version?readerInfo.huoba.app_version:'--'}}
                    </a-col>
                  </a-row>
                  <a-row type="flex" align="top" class="reader-item">
                    <a-col flex="145px">
                      <div class="reader-label">总访问次数</div>
                    </a-col>
                    <a-col flex="auto">
                      {{readerInfo.huoba.total_view_num?readerInfo.huoba.total_view_num:'--'}}
                    </a-col>
                  </a-row>
                  <a-row type="flex" align="top" class="reader-item">
                    <a-col flex="145px">
                      <div class="reader-label">访问时段</div>
                    </a-col>
                    <a-col flex="auto">
                      <div v-if="Object.keys(readerInfo.huoba.view_time_interval).length">
                        {{readerInfo.huoba.view_time_interval.name}}（{{readerInfo.huoba.view_time_interval.count}}秒）
                      </div>
                      <div v-else>--</div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/inquire/portrait.scss"></style>
<script>
import { READER_DETAIL } from "../../../apis/inquire.js";
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      pagePower: true,
      isLoading: true,
      readerID: 0,
      readerInfo: null,
      radioVal: "1",
      cateOneList: [],
      cateTwoList: [],
      cateOneChart: null,
      cateTwoChart: null,
    };
  },
  mounted() {
    this.readerID = this.$route.query.readerID;
    this.getInfoData();
  },
  updated() {},
  methods: {
    // 获取用户信息
    async getInfoData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        reader_id: this.readerID,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await READER_DETAIL(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.readerInfo = res.data;
        this.cateOneList = res.data.order.cate_one.splice(0,10).reverse();
        this.cateTwoList = res.data.order.cate_two.splice(0,10).reverse();
        this.$nextTick(() => {
          if(this.cateOneList.length){
            if(this.cateOneChart){
              this.cateOneChart.destroy();
              this.initChart('one');
            }else{
              this.initChart('one');
            }
          }
          if(this.cateTwoList.length){
            if(this.cateTwoChart){
              this.cateTwoChart.destroy();
              this.initChart('two');
            }else{
              this.initChart('two');
            }
          }
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 渲染条形图
    initChart(type){
      let _this = this,chart,data = [];
      if(type == 'one'){
        data = this.cateOneList;
        chart = new Chart({
          container: "cate-one",
          autoFit: true,
          height: (30*data.length)+30,
        });
        this.cateOneChart = chart;
      }else{
        data = this.cateTwoList;
        chart = new Chart({
          container: "cate-two",
          autoFit: true,
          height: (30*data.length)+30,
        });
        this.cateTwoChart = chart;
      }
      chart.data(data);
      chart.scale("count", {
        alias: " ",
      });
      chart.axis("name", {
        // tickLine: null,
        // line: null,
      });
      chart.axis("count", {
        title: {
          style: {
            fontSize: 14,
            fontWeight: 300,
          },
        },
        label:{
          formatter:(text,item,index)=>{
            if(Number(text)%1 === 0){
              return text;
            }else{
              return '';
            }
          }
        }
      });
      chart.legend(false);
      chart.coordinate("rect").transpose();
      chart.tooltip({
        shared: true,
        showMarkers: false,
      });
      chart.interaction("active-region");
      chart
        .interval()
        .adjust("stack")
        .position("name*count")
        .color("#4576DB")
        .tooltip("name*count",(name,count)=>{
          return{
            title:name,
            name:"下单次数",
            value:count
          }
        })
        .size(15);
      chart.render();
    }
  },
};
</script>
